<template>
  <div>
    <div class="tenantInfo-header">信息管理</div>
    <div class="EmployeeList">
      <div class="EmployeeList-title">
        <a-button type="danger"
                  @click="add('add')">
          <a-icon type="plus" />
          新增联系人
        </a-button>
        <a-button @click="del()">
          <a-icon type="delete" />移除
        </a-button>
        <a-input-search placeholder="输入员工姓名/手机号进行搜索"
                        style="width: 300px;float:right;"
                        @search="onSearch" />
        <a-select v-model="this.tenantId"
                  @change="onSerch()"
                  placeholder="管理员"
                  style="width:184px;float:right;margin-right:8px">
          <a-select-option v-for="item in cardTypeArr"
                           :value="item.tenantId"
                           :key="item.id">
            {{item.tenantName}}
          </a-select-option>
        </a-select>

      </div>
      <div>
        <a-table :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
                 :columns="columns"
                 :data-source="data"
                 :pagination="false"
                 class="scroll-table">
          <span slot="action"
                slot-scope="text, record"
                class="content-action">
            <div v-if="record.invoiceStatusEnum == 'UN'"
                 class="records-status"
                 @click="makeInvoice(record,1)"><img src="../../../assets/image/sellerHub/qrkp.png"
                   alt=""> 确认开票</div>
            <div v-if="record.invoiceStatusEnum == 'YES'"
                 class="records-status"
                 @click="makeInvoice(record,2)"><img src="../../../assets/image/sellerHub/ckxq.png"
                   alt=""> 查看详情</div>
          </span>
        </a-table>
      </div>
      <!-- <div>
        暂无员工
      </div> -->
    </div>
  </div>
</template>
<script>
const columns = [
  {
    title: '序号',
    align: 'center',
    width: 60,
    customRender: (text, record, index) => `${index + 1}` // 显示每一行的序号
  },
  {
    title: '员工姓名',
    dataIndex: 'materialName',
    scopedSlots: { customRender: 'materialName' },
  },
  {
    title: '手机号',
    dataIndex: 'unPackedQuantity',
    scopedSlots: { customRender: 'unPackedQuantity' },
  },
  {
    title: '角色',
    dataIndex: 'quantity',
    scopedSlots: { customRender: 'quantity' },
  },
  {
    title: '添加时间',
    dataIndex: 'quantity',
    scopedSlots: { customRender: 'quantity' },
  },
  {
    title: '操作',
    key: 'action',
    align: 'center',
    width: 120,
    scopedSlots: { customRender: 'action' },
  },
];
const data = [
  {
    materialNo: '1',
    materialName: '123',
    unPackedQuantity: '333',
    quantity: '123'
  }
];
export default {
  data () {
    return {
      data,
      columns,
      cardTypeArr: [],
      selectedRowKeys: [],
    }
  },
  methods: {
    onSelectChange (selectedRowKeys, selectedRows) {
      this.checkedPparcel = [];
      this.checkedPparcel = selectedRows
      this.selectedRowKeys = selectedRowKeys;
    },
  },
}
</script>
<style lang="less" scoped>
.tenantInfo-header {
  width: 100%;
  height: 54px;
  background: #fff;
  line-height: 54px;
  color: @newColorGreyFontM;
  font-size: 16px;
  padding-left: 24px;
}
.EmployeeList {
  margin: 16px;
  height: 300px;
  background: #fff;
  padding: 24px;
  .EmployeeList-title {
    height: 32px;
    margin-bottom: 16px;
  }
}

/deep/ .EmployeeList-title .ant-btn.ant-btn-danger {
  width: 108px;
  height: 32px;
  font-size: 12px;
  padding: 0;
  border-radius: 2px;
  margin-right: 8px;
  float: left;
}
/deep/ .EmployeeList-title .ant-btn {
  width: 72px;
  height: 32px;
  float: left;
  font-size: 12px;
  padding: 0;
  line-height: 32px;
  border-radius: 2px;
}
/deep/ .ant-select {
  font-size: 12px;
}
/deep/ .ant-select-selection {
  border: 1px solid @newBorderS;
  border-radius: 2px;
}
/deep/ .ant-input-affix-wrapper {
  font-size: 12px;
}
/deep/ .ant-input {
  font-size: 12px;
  border: 1px solid @newBorderS;
  border-radius: 2px;
}
</style>